import router, { asyncRoutes } from '@/router'
import nprogress from 'nprogress'
import 'nprogress/nprogress.css'
import store from '@/store'

/**
 *前置守卫
 *
*/

const whiteList = ['/login', '/404']
router.beforeEach(async(to, from, next) => {
  nprogress.start()
  if (store.getters.token) {
    // 存在token
    if (to.path === '/login') {
      // 免登录
      // 拦截路由时，不经过后置守卫 - 手动关闭进度条
      // next（地址）并没有执行后置守卫
      nprogress.done()
      // 跳转到主页
      next('/') // 中转到主页
    } else {
      // 获取到用户资料的前提 -> 1. 有token 2. 去的不是登录页
      // if (是否获取过资料，没有获取) {}
      if (!store.getters.userId) {
        const { roles } = await store.dispatch('user/getUserInfo')
        // 处理用户所拥有的路由权限
        // 明确: 个人信息中获取到员工的访问权限的路由信息
        console.log('个人信息', roles.menus)
        console.log('动态路由的数组', asyncRoutes)
        // 1. 遍历动态路由
        // 2. 结合个人信息(数组长度可能是1个, 3, 5...) -> 依次匹配动态路由的名称name
        // 3. 一旦匹配成功, 添加到路由表中 router.addRoutes([xxx])
        const filterRoutes = asyncRoutes.filter(item => {
          // console.log(item) // 每一个动态路由信息
          // console.log(item.name) // 每一个动态路由信息
          // roles.menus 用户路由访问权限集合
          return roles.menus.includes(item.name)
        })
        console.log(filterRoutes) // 筛选出来的数组 -> 该用户所能访问的路由页面
        router.addRoutes([...filterRoutes, { path: '*', redirect: '/404', hidden: true }])
        // 提交mutation 更新routes
        store.commit('user/setRoutes', filterRoutes)
        // router.addRoutes() 往路由表中添加路由信息 已知缺陷(刷新白屏问题) 针对于 router3.x版本
        // 重新转发一下 (让路由重新拥有信息)
        next(to.path)
        // 修复两个问题
        // 1. 刷新404
        // 2. 白屏的问题 vue-router3.x 版本的已知缺陷
      }
      next() // 放行
    }
  } else {
    // 没有token
    if (whiteList.includes(to.path)) {
      next()
    } else {
      next('/login') // 中转到登录页
      nprogress.done()
    }
  }
})

/** *
 * 后置守卫
 * **/
router.afterEach(() => {
  nprogress.done()
})
